<template>
	<view class="status_2" :style="{ backgroundColor: color }">
		<view class="status_Content">

			<view class="circleArea">
				<view :class="applyStatus===-1?'active':'statusCircle'">
					壹
				</view>
				<view class="line line_1"></view>
				<view :class="applyStatus===0||applyStatus===1||applyStatus===-2?'active':'statusCircle'">
					貳
				</view>
				<view class="line line_2"></view>
				<view :class="applyStatus===2?'active':'statusCircle'">
					叁
				</view>
				<view class="line"></view>
				<view :class="applyStatus===4||applyStatus===-5||applyStatus===3?'active':'statusCircle'">
					肆
				</view>
			</view>


			<view class="infoArea">
				<view class="statusItem info_1">

					<view class="statusInfo">
						<view class="mainInfo">
							{{isChoose}}
						</view>

						<view class="subInfo">
							{{ status1 }}
						</view>
					</view>
				</view>

				<view class="statusItem info_2">


					<view class="statusInfo">
						<view class="mainInfo">
							{{ status2 }}
						</view>

						<view class="subInfo">
							营业执照
						</view>
					</view>
				</view>

				<view class="statusItem info_3">


					<view class="statusInfo">
						<view class="mainInfo">
							{{ status3 }}
						</view>

						<view class="subInfo">
							首次进货商品
						</view>
					</view>
				</view>

				<view class="statusItem info_4">


					<view class="statusInfo">
						<view class="mainInfo">
							{{ status4 }}
						</view>

						<view class="subInfo">
							对公打款凭证
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "certifyProgress",
		props: {
			applyStatus: {
				type: Number,
				default: null
			},
			color: {
				type: String,
				default: 'rgba(235, 236, 237, 1)' // 默认背景颜色
			},
			isChoose: {
				type: String,
				default: '选择' // Default value for status1
			},
			status1: {
				type: String,
				default: '服务商类型' // Default value for status1
			},
			status2: {
				type: String,
				default: '上传' // Default value for status2
			},
			status3: {
				type: String,
				default: '下单' // Default value for status3
			},
			status4: {
				type: String,
				default: '上传' // Default value for status4
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.status_2 {

		box-sizing: border-box;
		width: 692rpx;
		height: 246rpx;
		opacity: 1;
		border-radius: 14rpx;
		background: rgba(235, 236, 237, 1);
		display: flex;
		align-items: center;
		justify-content: center;

		.status_Content {

			width: 100%;
			align-items: center;
			display: flex;
			flex-direction: column;
			align-items: center;



			.circleArea {
				// border: solid;
				// margin: 0 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				width: 86%;

				.statusCircle {
					// statusCircle的样式 

					display: flex;
					align-items: center;
					justify-content: center;
					width: 66rpx;
					height: 66rpx;
					background: rgba(249, 236, 210, 1);
					border-radius: 50%;
					box-sizing: border-box;

				}

				.active {
					width: 66rpx;
					height: 66rpx;
					opacity: 1;
					background: rgba(224, 209, 186, 1);
					border: 2rpx solid rgba(194, 167, 130, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					border-radius: 50%;



				}

				.line {
					width: 66rpx;
					margin-right: 10rpx;
					margin-left: 10rpx;
					border: 2rpx dashed rgba(194, 167, 130, 1);
				}

				.line_1 {
					margin-left: 0;
					margin-right: 5rpx;
					width: 60rpx;
				}

				.line_2 {
					width: 60rpx;
				}

			}



			.infoArea {
				margin-right: 5rpx;
				width: 95%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.statusItem {
					// statusItem的样式  

					display: flex;
					align-items: center;
					flex-direction: column;



					.statusInfo {
						// statusInfo的样式  
						padding: 0 15rpx;
						margin-top: 26rpx;
						display: flex;
						align-items: center;
						flex-direction: column;
						box-sizing: border-box;

						.mainInfo {
							// mainInfo的样式  
							font-size: 28rpx;
						}

						.subInfo {
							// subInfo的样式  
							font-size: 20rpx;
						}
					}
				}

				.info_1 {
					margin-left: 6rpx;
					padding: 0;
					white-space: nowrap;
					width: 140rpx;
				}


				.info_2 {
					
					padding-left: 0;
					text-align: left;
					margin-left: -10rpx;
					margin-right: 5rpx;
					
				}
				.info_3{
					
					margin-left: 6rpx;
					margin-right: -10rpx;
					padding-right: 0rpx;
					text-align: right;
				}
			}

		}
	}
</style>